<template>
	<view class="page">
		<!-- <u-navbar :title="title" :autoBack="true" /> -->
		<view class="flex" style="">
			<u-icon name="map" color="#000" labelSize="14" labelColor="#000" label="龙光城" @click="chooseLoc"></u-icon>
			<view style="width:3%;" @click="chooseLoc"></view>
			<u-search placeholder="请输入理疗师名称" v-model="keyword" bgColor="#fff" :showAction="false"></u-search>
		</view>
		<view class="flex" style="padding-bottom: 20rpx;">
			<u-tag type="success" v-for="(item,index) in tagList" :text="item" :key="index"
				:bgColor="tagIndex==index?'#24c373':'#fff'" :color="tagIndex==index?'#fff':'#000'"
				style="margin-right: 20rpx;margin-top: 20rpx;" :borderColor="tagIndex==index?'#24c373':'#fff'"
				@click="changeTag(index)"></u-tag>
		</view>
		<scroll-view scroll-y="true" class="scroll-box1">
			<tachnician-item v-for="(item,index) in [...jsList]" :item="item" :key="index" :pid="id"></tachnician-item>
		</scroll-view>
		<order-pay :item="item" :show="show" @close='show=false' :pid="id"></order-pay>
	</view>
</template>

<script>
	export default {
		onLoad({
			id,
			name
		}) {
			if (name) {
				this.title = name
			}
			uni.setNavigationBarTitle({
				title: this.title,
			});

			this.id = id
			uni.$on('createPay', ({
				open,
				item
			}) => {
				this.show = open
				this.item = item
			})
			uni.getLocation({
				altitude: true,
				complete(e) {
					const {
						latitude,
						longitude
					} = e



					// uni.$u.toast(latitude)
					// 后端坐转发  前端请求跨域  
					// const url =
					// 	`https://apis.map.qq.com/ws/geocoder/v1/?key=7KABZ-EXQ6V-2HMPQ-5C3AT-RYU7S-M6B7P&location=${latitude},${longitude}`
					// uni.request({
					// 	url,
					// 	header: {
					// 		'Access-Control-Allow-Origin': '*'
					// 	},
					// 	success(e) {
					// 		console.log("我转换的地址", e);
					// 	}
					// })
				}
			})
		},
		data() {
			return {
				show: false,
				id: null,
				item: null,
				title: '中式按摩',
				dataList: [{
						'headimg': '/static/3.png',
						'name': '赵智伟 ',
						'rate': '9.9',
						home: '龙光城第一男模',
						'photos': '',
						'order': '',
						'store': '',
						'comment': '',
						'collect': '',
						'distance': '',
						'time': '',
						'status': 1,
						'isGood': true,
						'isHot': true,
						'isBorder': true,
						'isFire': true
					},
					{
						'headimg': 'https://djpub.imos.dongjiao.cc/upload_qp/img/20240407/4674de66835cff863ac0898c1f95f691.png?x-oss-process=style/fuzhao1',
						'name': '铁观音',
						'rate': '5.0',
						'photos': '',
						'order': '',
						'store': '',
						'comment': '',
						'collect': '',
						'distance': '',
						'time': '',
						'status': 1,
						'isGood': false,
						'isHot': true,
						'isBorder': false,
						'isFire': false
					},
					{
						'headimg': 'https://djpub.imos.dongjiao.cc/upload_qp/img/20240607/069a38f3a78cf4f2c55e6f4ad5ccd2b3.png?x-oss-process=style/fuzhao1',
						'name': '小怪兽',
						'rate': '5.0',
						'photos': '',
						'order': '',
						'store': '',
						'comment': '',
						'collect': '',
						'distance': '',
						'time': '',
						'status': 1,
						'isGood': false,
						'isHot': false,
						'isBorder': false,
						'isFire': true
					}
				],
				keyword: '',
				tagIndex: 0,
				tagList: ['全部', '资深', '专家', '免费出行'],
			}
		},
		computed: {
			jsList() {
				// 如果数据列表为空，直接返回空数组
				if (!this.keyword || this.dataList.length == 0) {
					return this.dataList;
				}

				// 使用 Set 去重
				const list = new Set();
				const dislist = ['updateUserId', 'updateTime', 'id', 'time'];

				this.dataList.forEach(item => {
					// 遍历对象的键值对
					for (const [key, value] of Object.entries(item)) {
						// 如果键不在排除列表中且值包含过滤文本
						if (value && !dislist.includes(key) && String(value).includes(this.filterText)) {
							list.add(JSON.stringify(item));
							break; // 找到匹配的就不再检查其他键
						}
					}
				});
				const n_list = Array.from(list).map(item => JSON.parse(item));
				// 将 Set 转换为数组，并解析为对象
				return Array.from(list).map(item => JSON.parse(item));
			}
		},
		methods: {
			changeTag(index) {
				this.tagIndex = index
			},
			chooseLoc() {
				uni.chooseLocation({
					success({
						address,
						latitude,
						longitude
					}) {
						function extractProvince(text) {
							const provinceRegex = /([\u4e00-\u9fa5]+省)/g;
							const matches = text.match(provinceRegex);
							return matches ? matches[0] : false;
						}
						const name = extractProvince(address)

					},
					complete(e) {
						console.log("我选择的地方", e);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		max-width: 100vw;
		padding: 30rpx 20rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		background-color: #f7f7f7;
	}

	/deep/.u-sticky {
		top: 1px !important
	}

	.scroll-box1 {
		flex: 1;
		max-height: 95vh;
		padding-bottom: 260rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;
	}
</style>